<template>
  <div class="system-role-container layout-padding">
    <div class="system-role-padding layout-padding-auto layout-padding-view">
      <div class="m-header">
        <div class="pro-name">
          <el-input
            clearable
            size="small"
            placeholder="请输入方案评审记录关键字"
            v-model="proName"
            :suffix-icon="Search"
          />
        </div>

        <div style="display: flex; align-items: center">
          <!-- <el-button
              size="small"
              @click='exportExcel()'
              :icon="Upload"
              type="success"
              >导出
              </el-button> -->
          <el-button
          v-if='roleBool'
            size="small"
            @click="newPerson"
            :icon="CirclePlus"
            type="primary"
            >新增记录
          </el-button>
        </div>
      </div>

      <div class="table_content">
        <el-table
          @selection-change="handleSelection"
          ref="table_s_exp"
          :height="activeHeight"
          style="width: 100%"
          :header-cell-style="{ background: '#fafbfc', color: '#333333' }"
          :data="tableDataPro"
        >
          <!-- <el-table-column
              
              
              type="selection"
              width="40"
            
              align="center"
            /> -->
          <el-table-column
            type="index"
            width="70"
            label="序号"
            align="center"
          />
          <el-table-column
            width="180"
            sortable
            show-overflow-tooltip
            label="文件序号"
            align="left"
            prop="review_index"
          ></el-table-column>

          <el-table-column
            width="900"
            sortable
            show-overflow-tooltip
            label="方案评审题目"
            align="left"
            prop="review_record"
          ></el-table-column>

          <el-table-column
            width="130"
            sortable
            show-overflow-tooltip
            label="评审时间"
            prop="review_time"
          ></el-table-column>

          <el-table-column
            width="80"
            show-overflow-tooltip
            label="创建人"
            prop="create_user"
          >
          </el-table-column>

          <el-table-column
            sortable
            width="180"
            show-overflow-tooltip
            label="创建时间"
            prop="create_time"
          ></el-table-column>

          <el-table-column label="操作" align="center">
            <template #default="{ row }">
              <el-button
              v-if="roleBool"
                link
                type="primary"
                size="small"
                @click="editTable(row)"
                >编辑</el-button
              >

              <el-button
              v-if="!roleBool"
                link
                type="primary"
                size="small"
                @click="editTable(row)"
                >查看</el-button
              >

              <el-popconfirm
                placement="left"
                @confirm="deleteRow(row)"
                title="确认删除?"
              >
                <template #reference>
                  <el-button link type="danger" size="small">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-dialog
      draggable
      @close="closeFrom(RefEdit)"
      title="编辑记录"
      v-model="editDio"
      width="32%"
    >
      <el-form
        ref="RefEdit"
        size="small"
        :model="editData"
        :rules="RulesEdit"
        label-width="100px"
      >

      <el-form-item class="my_item" label="评审日期" prop="review_time">
          <el-date-picker
            style="width: 100%"
            v-model="editData.review_time"
            value-format="YYYY-MM-DD"
            type="date"
            placeholder="请选择日期"
            size="small"
          />
        </el-form-item>
      <el-form-item class="my_item" label="文件序号" prop="review_index">
        <span>ED-PR-   &nbsp;</span>  &nbsp;
        <el-input
   style="width:15%"
    resize="none"
    size="small"
    v-model="editData.review_DH"
    placeholder="专业代号"
  />
  &nbsp;
  -
  &nbsp;
  <el-input
           style="width:10%"
            resize="none"
            size="small"
            v-model="choose_time_str"
            placeholder="年份"
          />
  &nbsp;- &nbsp;
  <el-input
   style="width:15%"
    resize="none"
    size="small"
    v-model="editData.review_index"
    placeholder="请输入文件序号"
  />
</el-form-item>


        <el-form-item class="my_item" label="方案评审题目" prop="review_record">
          <el-input
            resize="none"
            :rows="5"
            type="textarea"
            size="small"
            v-model="editData.review_record"
            placeholder="请输入方案评审记录"
          />
        </el-form-item>

       

        <el-form-item class="my_item" label="其他说明" prop="note">
          <el-input
            resize="none"
            :rows="5"
            type="textarea"
            size="small"
            v-model="editData.note"
            placeholder="请输入其他说明"
          />
        </el-form-item>

        <el-form-item
          style="position: relative"
          class="my_item"
          label="记录附件"
          prop="attached_schedule"
        >
          <el-upload
            style="width: 100%"
            :file-list="fileList"
            :icon="Download"
            class="upload-demo22"
            action="#"
            :show-file-list="true"
            :http-request="uploadTable_change_add"
            multiple
          >
            <el-button
              class="btn_upload btn_upload_change"
              size="small"
              type="success"
              >上传文件</el-button
            >

            <template #file="scope">
              <div
                class="flex_file"
                v-for="(item, index) in scope"
                :key="index"
              >
                <div>{{ item.name }}</div>

                <div v-if="item.name !== ''">
                  <el-button
                  
                    @click="downLoadFn(item)"
                    link
                    type="primary"
                    size="small"
                    >下载</el-button
                  >
                  <el-button
                    @click="checkFileFn(item)"
                    link
                    type="success"
                    size="small"
                    >浏览</el-button
                  >
                  <el-button
                   v-if='roleBool'
                    @click="DelFileFn(item)"
                    link
                    type="danger"
                    size="small"
                    >删除</el-button
                  >
                </div>
              </div>
            </template>
          </el-upload>
        </el-form-item>

        <el-form-item>
          <div  v-if='roleBool' style="width: 100%; display: flex; flex-direction: row-reverse">
            <el-button @click="editDio = false">取 消</el-button>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <el-button type="primary" @click="handleCopyEquipEdit(RefEdit)"
              >确 定</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
    draggable
      @close="addcCloseFrom(RefAdd)"
      title="新增方案评审"
      v-model="addDio"
      width="32%"
    >
      <el-form
        ref="RefAdd"
        size="small"
        :model="addData"
        :rules="RulesEdit"
        label-width="100px"
      >
      <el-form-item class="my_item" label="评审日期" prop="review_time">
          <el-date-picker
            style="width: 100%"
            v-model="addData.review_time"
            value-format="YYYY-MM-DD"
            type="date"
            placeholder="请选择日期"
            size="small"
          />
        </el-form-item>
      <el-form-item class="my_item" label="文件序号" prop="review_index">
        <span>ED-PR-   &nbsp;</span>  &nbsp;
   <el-input
   style="width:15%"
    resize="none"
    size="small"
    v-model="addData.review_DH"
    placeholder="专业代号"
  />
  &nbsp;
  -
  &nbsp;

    <el-input
           style="width:10%"
            resize="none"
            size="small"
            v-model="choose_time_str"
            placeholder="年份"
          />

    &nbsp;- &nbsp;
          <el-input
           style="width:15%"
            resize="none"
            size="small"
            v-model="addData.review_index"
            placeholder="文件序号"
          />
        </el-form-item>
        <el-form-item class="my_item" label="方案评审题目" prop="review_record">
          <el-input
            resize="none"
            :rows="5"
            type="textarea"
            size="small"
            v-model="addData.review_record"
            placeholder="请输入方案评审记录"
          />
        </el-form-item>
      
        <el-form-item class="my_item" label="其他说明" prop="note">
          <el-input
            resize="none"
            :rows="5"
            type="textarea"
            size="small"
            v-model="addData.note"
            placeholder="请输入其他说明"
          />
        </el-form-item>

        <el-form-item
          style="position: relative"
          class="my_item"
          label="记录附件"
          prop="attached_schedule"
        >
          <el-upload
            :file-list="file_ist_add"
            style="width: 100%"
            :icon="Download"
            class="upload-demo22"
            action="#"
            :show-file-list="true"
            :http-request="uploadTable_change"
            multiple
          >
            <el-button
              class="btn_upload btn_upload_change"
              size="small"
              type="success"
              >上传文件</el-button
            >
          </el-upload>
        </el-form-item>

        <el-form-item>
          <div style="width: 100%; display: flex; flex-direction: row-reverse">
            <el-button @click="addDio = false">取 消</el-button>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <el-button type="primary" @click="handleCopyAdd(RefAdd)"
              >确 定</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup name="systemRole">
import JSZipUtils from "jszip-utils";
import docxtemplater from "docxtemplater";
import { saveAs } from "file-saver";
import JSZip from "pizzip";
import ImageModule from "docxtemplater-image-module-free";
import { onMounted, ref, watch ,computed} from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import {
  Close,
  Search,
  PictureFilled,
  CirclePlus,
  Upload,
  Download,
  Delete,
  Filter,
  Warning,
} from "@element-plus/icons-vue";
import { useProjectStore } from "../../stores/project";
import { storeToRefs } from "pinia";
import {
  DeleteDesignOptimizationScheme,
  GetDesignOptimizationSchemes,
  AddUpdateDesignOptimizationScheme,
} from "../../api/dept";

import {
  GetAllProjectReview,
  AddProjectReview,
  UpdateProjectReview,
  DeleteProjectReview,
} from "../../api/technicalManagement";

import { DownloadDepartmentFile } from "../../api/projectManage/projectList";
import PinYinMatch from "pinyin-match";
import checkFile from "/@/utils/checkFile";
let store = useProjectStore();

let list_filtered = ref([]);

let { projectInfo } = storeToRefs(store);

let proName = ref("");
let sex_ = ref([]);
watch(proName, async () => {
  if (proName.value) {
    let res = await GetAllProjectReview();

    let data = JSON.parse(JSON.stringify(res));
    tableDataPro.value = data.filter((v) =>
      v.review_record.includes(proName.value)
    );
  } else {
    getProTable({});
  }
});

let clickUpLoad = () => {
  document.querySelector(".btn_upload").click();
};

let clickUpLoad_change = () => {
  document.querySelector(".btn_upload_change").click();
};

let fileArr = ref([]);
let fileBase64Str = ref([]);
let uploadTable = (file) => {
  fileArr.value.push(file);
};

let fileArrChange = ref([]);
let uploadTable_change = (file) => {
  file_ist_add.value.push(file);
};

let fileEidtAdd = ref([]);
let uploadTable_change_add = (file) => {
  fileEidtAdd.value.push(file);
};

let del_item = (item) => {
  fileBase64Str.value = fileBase64Str.value.filter((v) => !(v == item));
};

let del_item_change = (item) => {
  if (fileBase64Str.value.length == 1) {
    editData.value.attached_schedule = "";
  }
  fileBase64Str.value = fileBase64Str.value.filter((v) => !(v == item));
};






watch(
  fileArr,
  () => {
    fileBase64Str.value = [];
    fileArr.value.forEach((v) => {
      let reader = new FileReader();
      reader.readAsDataURL(v.file);
      reader.onloadend = function () {
        // 将文件（file）转换成base64字符串
        fileBase64Str.value.push(reader.result);
      };
    });
  },
  { deep: true }
);

watch(
  fileArrChange,
  () => {
    fileArrChange.value.forEach((v, i) => {
      let reader = new FileReader();
      reader.readAsDataURL(v.file);
      reader.onloadend = function () {
        // 将文件（file）转换成base64字符串

        fileBase64Str.value.push(reader.result);
        if (i === fileArrChange.value.length - 1) {
          fileArrChange.value = [];
        }
      };
    });
  },
  { deep: true }
);

let matchProfessional = (searchContent) => {
  if (searchContent) {
    let result = [];
    professional_leader_data_options.value.forEach((item) => {
      // matchResult 的值为 true/false
      let matchResult = PinYinMatch.match(item.label, searchContent);
      if (matchResult) {
        result.push(item);
      }
    });

    professional_leader_data_options_PY.value = result;
  } else {
    professional_leader_data_options_PY.value =
      professional_leader_data_options.value;
  }
};

let matchTeamLeader = (searchContent) => {
  if (searchContent) {
    let result = [];
    team_leader_options.value.forEach((item) => {
      // matchResult 的值为 true/false
      let matchResult = PinYinMatch.match(item.label, searchContent);
      if (matchResult) {
        result.push(item);
      }
    });

    team_leader_options_PY.value = result;
  } else {
    team_leader_options_PY.value = team_leader_options.value;
  }
};

let RefEdit = ref(null);
let closeFrom = () => {
  fileBase64Str.value = [];
  RefEdit.value.resetFields();
};

let handleCopyEquipEdit = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      let obj = {
        ...editData.value,
        fileType: "方案评审",
        user: JSON.parse(localStorage.getItem("userMessage")).user_account,
      };
      let url = "";
      if (deleteFileArr.value.length > 0) {
        url = `?id=${obj.id}&review_time=${obj.review_time}&review_record=${obj.review_record}&note=${obj.note}&fileType=${obj.fileType}&user=${obj.user}&review_index=ED-PR-${editData.value.review_DH}-${choose_time_str.value}-${editData.value.review_index}`;

        deleteFileArr.value.forEach((v, i) => {
          url += `&deleteFileNames=${v.url}`;
        });
      } else {
        url = `?id=${obj.id}&review_time=${obj.review_time}&review_record=${obj.review_record}&note=${obj.note}&fileType=${obj.fileType}&user=${obj.user}&review_index=ED-PR-${editData.value.review_DH}-${choose_time_str.value}-${editData.value.review_index}&deleteFileNames=""`;
      }

      if (fileEidtAdd.value.length > 0) {
        let formData = new FormData();
        fileEidtAdd.value.forEach((v) => {
          formData.append("file", v.file);
        });
        await UpdateProjectReview(url, formData);
      } else {
        await UpdateProjectReview(url);
      }

      ElMessage({
        message: "修改成功",
        type: "success",
      });
      fileEidtAdd.value = [];
      deleteFileArr.value = [];

      editDio.value = false;
      getProTable({});
    }
  });
};

let checkFileFn = (item) => {
  let row = {
    remote_url: item.url,
    file_name: item.name,
  };
  checkFile("", row);
};

let downLoadFn = async (item) => {
  let res = await DownloadDepartmentFile({ remote_url: item.url });

  let filename = res.headers; //下载后文件名
  let filename2 = ""; //下载后文件名
  filename = filename["content-disposition"];
  filename = window.decodeURI(filename);
  filename2 = filename.split(";")[1].split("filename*=UTF-8''")[1];
  filename = filename.split(";")[1].split("filename=")[1];
  const link = document.createElement("a"); // 创建a标签
  const blo = new Blob([res.data], { type: res.data.type }); // 设置下载格式
  link.style.display = "none";
  const url = window.URL.createObjectURL(blo);
  console.log(url);
  link.href = url;
  if (filename == undefined) {
    filename = filename2;
  }
  console.log(filename);
  link.download = filename;

  document.body.appendChild(link);
  link.click(); // 触发下载
  window.URL.revokeObjectURL(url); // 释放掉blob对象
  document.body.removeChild(link);
  ElMessage({
    message: "成功生成文件",
    type: "success",
  });
};

let exportExcel = () => {
  let obj = {
    table: exportData.value.map((v, i) => {
      return {
        index: i + +1,
        optimal_classification: v.optimal_classification,
        unit_classification: v.unit_classification,
        design_habits_practices: v.design_habits_practices,
        improvement_measure: v.improvement_measure,
        hasImage: v.attached_schedule.includes("base64") ? false : true,
        attached_schedule_str: !v.attached_schedule.includes("base64")
          ? v.attached_schedule
          : null,
        attached_schedule_img: v.attached_schedule.includes("base64")
          ? v.attached_schedule.split("||").map((v) => {
              return {
                imgUrl: v,
              };
            })
          : null,
        note: v.note,
      };
    }),
  };

  exportWordDocx({ name: "设备专业设计优化方案库", data: obj });
};

let exportWordDocx = ({ name, data: wordData }) => {
  const url = `/${name}.docx`;
  JSZipUtils.getBinaryContent(url, (err, data) => {
    if (err) {
      ElMessage.error("导出报告出错");
      console.log("err:", err);
      return;
    }
    let zip = new JSZip(data);
    const Docxtemplater = docxtemplater;
    const imageOptions = {
      centered: false,
      getImage(tagValue, tagName) {
        return new Promise(function (resolve, reject) {
          JSZipUtils.getBinaryContent(tagValue, function (error, content) {
            if (error) {
              return reject(error);
            }
            return resolve(content);
          });
        });
      },
      getSize(img, tagValue, tagName) {
        // 非固定大小（这里是设置宽度最大为500px的图片）
        return new Promise(function (resolve, reject) {
          let image = new Image();
          image.src = tagValue;
          let imgWidth, imgHeight;
          image.onload = function () {
            imgWidth = 110;
            imgHeight = (image.height * imgWidth) / image.width;

            resolve([imgWidth, imgHeight]);
          };
          image.onerror = function (e) {
            console.log("img, tagValue, tagName : ", img, tagValue, tagName);
            reject(e);
          };
        });
      },
    };

    const nullGetter = (part, scopeManager) => {
      if (!part.module) {
        return "";
      }
    };
    let doc = new Docxtemplater(zip, {
      linebreaks: true,
      nullGetter: nullGetter,
      modules: [new ImageModule(imageOptions)],
    });

    doc.resolveData({ ...wordData }).then(() => {
      doc.render();
      let out = doc.getZip().generate({
        type: "blob",
        MimeType:
          "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
      });
      saveAs(out, `${name}.docx`);
    });
  });
};

let file_ist_add = ref([]);

let handleCopyAdd = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      let formData = new FormData();
      file_ist_add.value.forEach((v) => {
        formData.append("file", v.file);
      });

      await AddProjectReview(
        "方案评审",
        addData.value.review_time,
        addData.value.review_record,
        addData.value.note,

        
        JSON.parse(localStorage.getItem("userMessage")).user_name,

        `ED-PR-${addData.value.review_DH}-${choose_time_str.value}-${addData.value.review_index}`,
        formData
      );

      ElMessage({
        message: "新增成功",
        type: "success",
      });
      addDio.value = false;
      getProTable({});
    }
  });
};

let RefAdd = ref(null);
let addDio = ref(false);
let addData = ref({});
let editDio = ref(false);
let editData = ref({});
let RulesEdit = ref({
  review_index:[{ required: false, message: "请输入", trigger: "blur" }],
  review_record: [{ required: true, message: "请输入", trigger: "blur" }],
  review_time: [{ required: true, message: "请选择", trigger: "change" }],
  design_habits_practices: [
    { required: false, message: "请输入", trigger: "blur" },
  ],
  improvement_measure: [
    { required: false, message: "请输入", trigger: "blur" },
  ],
  attached_schedule: [{ required: false, message: "请输入", trigger: "blur" }],
  note: [{ required: false, message: "请输入", trigger: "blur" }],
});
let editTable = (data) => {
  editData.value = { ...data };
  let arr = data.review_index.split('-')
  editData.value.review_DH = arr[2]
  choose_time_str.value =  arr[3] || 2025
  editData.value.review_index =  arr[4]
  if (data.review_attached_files.length > 0) {
    let str = data.review_attached_files.map((v) => {
      return {
        name: v.slice(v.lastIndexOf("\\")).replace("\\", ""),
        url: v,
      };
    });

    fileList.value = str;

    editDio.value = true;
  }
};

let deleteFileArr = ref([]);
let DelFileFn = (item) => {
  fileList.value = fileList.value.filter((v) => v.url !== item.url);
  console.log(item);
  deleteFileArr.value.push(item);
};

let deleteRow = async (data) => {
  await DeleteProjectReview({ id: data.id });
  getProTable({});
  ElMessage.success("删除成功");
};

let exportData = ref([]);

let handleSelection = (val) => {
  exportData.value = val;
};

let addcCloseFrom = () => {
  addData.value.review_DH = ''
  file_ist_add.value = [];
  RefAdd.value.resetFields();
};

let newPerson = () => {
  addDio.value = true;
};

let proj_name_data = ref([]);
let proj_name_data_options = ref([]);
let professional_leader_data = ref([]);
let professional_leader_data_options = ref([]);
let professional_leader_data_options_PY = ref([]);
let team_leader_data = ref([]);
let team_leader_options = ref([]);
let team_leader_options_PY = ref([]);

let work_major_ = ref([]);
let educational_ = ref([]);
let professional_post_ = ref([]);
let design_post_ = ref([]);
let qualification_ = ref([]);

let calculateAge = (birthday) => {
  // 创建一个日期对象，表示出生日期
  const birthDate = new Date(birthday);

  // 创建一个日期对象，表示当前日期
  const today = new Date();

  // 计算年份差
  let age = today.getFullYear() - birthDate.getFullYear();

  // 如果生日还没到，年龄减1
  if (
    today.getMonth() < birthDate.getMonth() ||
    (today.getMonth() === birthDate.getMonth() &&
      today.getDate() < birthDate.getDate())
  ) {
    age--;
  }

  return age;
};

let getProTable = async (
  data,
  sex = [],
  work_major = [],
  educational = [],
  professional_post = [],
  design_post = [],
  qualification = []
) => {
  let res = await GetAllProjectReview(data);
  res.sort((a,b)=>new Date(a.review_time) - new Date(b.review_time))
  let ORGdata = JSON.parse(JSON.stringify(res));
  const filters = {
    sex,
    work_major,
    educational,
    professional_post,
    design_post,
    qualification,
  };

  tableDataPro.value = multiFilter(
    JSON.parse(JSON.stringify(ORGdata)),
    filters
  );
};

let choose_time_str = ref('2025')
let fileList = ref([]);

function multiFilter(array, filters) {
  const filterKeys = Object.keys(filters);

  return array.filter((item) => {
    return filterKeys.every((key) => {
      if (!filters[key].length) return true;
      return !!~filters[key].indexOf(item[key]);
    });
  });
}

let getOptionsData = (data, str) => {
  return [...new Set(data.map((v) => v[str]))]
    .filter((v) => {
      if (v) {
        return v;
      }
    })
    .map((v) => {
      return {
        value: v,
        label: v,
      };
    });
};

//   watch([sex_,educational_,professional_post_,design_post_,qualification_,work_major_],()=>{
//     getProTable(
//         {},
//          sex_.value,
//          work_major_.value,
//          educational_.value,
//          professional_post_.value,
//          design_post_.value,
//          qualification_.value,

//       );
//   })

let personOptions = ref([]);

let tableDataPro = ref([]);

watch(
  projectInfo,
  () => {
    if (projectInfo.value && Object.keys(projectInfo.value).length > 0) {
      getProTable(
        {},
        sex_.value,
        work_major_.value,
        educational_.value,
        professional_post_.value,
        design_post_.value,
        qualification_.value
      );
    }
  },
  { immediate: true }
);

let activeHeight = ref(0);

let userOptionsleader = ref([]);
let optionsNewteam_leader = ref([]);



watch(()=>addData.value.review_time,()=>{
  if(!addData.value.review_time) return false
  if(tableDataPro.value.length == 0){
    choose_time_str.value = addData.value.review_time.slice(0,addData.value.review_time.indexOf('-'))
    addData.value.review_index = `001`
   
  }else{
    let time =  addData.value.review_time.slice(0,addData.value.review_time.indexOf('-'))
   
    let arr = tableDataPro.value.filter(v=>(v.review_time.slice(0,v.review_time.indexOf('-'))===time))
  if(arr.length>0){
    arr.sort((a, b) => {
  return new Date(a.review_time) - new Date(b.review_time);
})

for(let i in arr){

 if(new Date(arr[i].review_time)>new Date(addData.value.review_time)){

  addData.value.review_index = `${Number(i) + +1}`.padStart(3, '0')
  choose_time_str.value = addData.value.review_time.slice(0,addData.value.review_time.indexOf('-'))
  return 
 }else{
addData.value.review_index = `${arr.length + 1}`.padStart(3, '0')
choose_time_str.value = addData.value.review_time.slice(0,addData.value.review_time.indexOf('-'))
 }
}


  }else{

addData.value.review_index = `001`
choose_time_str.value = addData.value.review_time.slice(0,addData.value.review_time.indexOf('-'))
  }

 

  }
})

let roleBool = ref(false)
// 页面加载时
onMounted(() => {
  roleBool.value = JSON.parse(localStorage.getItem("userMessage")).roles.includes('科室组长')
  activeHeight.value =
    document.querySelector(".system-role-padding").clientHeight - 80;
  window.addEventListener("resize", () => {
    activeHeight.value =
      document.querySelector(".system-role-padding").clientHeight - 80;
  });
});
</script>

<style scoped lang="scss">
.m-header {
  display: flex;
  align-items: center;
}
.m-header .pro-name {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.m-header .el-input {
  width: 300px;
}
.m-header .el-button {
  margin-right: 10px;
}

.system-role-container {
  .system-role-padding {
    padding: 15px;
    .el-table {
      flex: 1;
    }
  }
}
.button_footer {
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
}
.table_content {
  margin-top: 20px;
}

::v-deep(.el-table--large .el-table__cell) {
  padding: 6px 0;
}

.table_box {
  padding: 20px 50px;
}

.button_poastion_flex_iem {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}

.backgroun_border {
  // 	::v-deep .el-tabs__header {
  //     margin-top: 39px;
  //   }
}

::v-deep(.el-tabs__item::after) {
  position: absolute;
  content: " ";
  top: 0;
  width: 2px;
  height: 100%;
  background: #eee;
  right: 0;
}

.active {
  color: rgb(24, 144, 255);
}

.icone {
  display: flex;
  align-items: center;
  justify-content: center;
}

::v-deep(.cell) {
  // display: flex;
  // align-items: center;
}
.flex_file {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

::v-deep(.upload-demo22) {
  .el-upload-list--text {
    height: 150px;
    overflow-y: scroll;
    border: 1px solid #eee;
    padding: 5px;
  }
}
</style>
